<script setup>
import {defineEmits, defineProps,ref} from "vue";
const props = defineProps(['theme','content','row','primary'])
const emit = defineEmits(['confirm','cancel'])
const dom = ref(null)

function confirmClick(e){
  e.preventDefault();
  emit('confirm',props.row)
}

function cancelClick(e){
  e.preventDefault();
  emit('cancel',props.row)
}

defineExpose({ dom });

</script>

<template>
  <!-- Modal -->
  <div class="modal fade" tabindex="-1" ref="dom" :aria-labelledby="`modal-label-${props.primary||'dialogModalLabel'}`" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" :id="`modal-label-${props.primary||'dialogModalLabel'}`">{{ props.theme||'提示框'}}</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" @click="cancelClick"></button>
        </div>
        <div class="modal-body">
          {{ props.content||'是否执行请求操作？' }}
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="cancelClick">关闭</button>
          <button type="button" class="btn btn-primary" data-bs-dismiss="modal" @click="confirmClick">确认</button>
        </div>
      </div>
    </div>
  </div>
</template>